<template>
  <div>
    <a-card style="margin-bottom: 10px;" :body-style="{ padding: '0 24px' }" :bordered="false">
      <a-tabs :default-active-key="0" :tab-bar-style="{marginBottom: '0',paddingTop:'0'}" @change="handleChangeTab">
        <a-tab-pane v-for="(item,index) in permissionMenuList" :key="index">
          <span slot="tab"><a-icon :type="item.meta.icon" /> {{ item.meta.title }}</span>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <component :is="currentComponent" />
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      currentTabIndex: 0,
      currentComponent: null
    }
  },
  computed: {
    ...mapState({
      permissionMenuList: function(state) {
        const parentPermission = state.user.permissionList.find(item => item.path === this.$route.path)
        return parentPermission ? parentPermission.children : []
      }
    })
  },
  created() {
  },
  mounted() {
    console.info('🚀 ~ line:37 -----', this.permissionMenuList)

    if (this.permissionMenuList.length > 0) {
      this.handleChangeTab(0)
    }
  },
  methods: {
    handleChangeTab(index) {
      this.currentTabIndex = index
      const selectedMenu = this.permissionMenuList[index]

      if (selectedMenu) {
        const requireComponent = require.context('@/views', true, /\.vue$/)
        const componentPath = `./${selectedMenu.component}.vue`

        if (requireComponent.keys().includes(componentPath)) {
          this.currentComponent = () =>
            Promise.resolve(requireComponent(componentPath))
        } else {
          console.error(`组件路径 ${componentPath} 未找到`)
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';

/deep/ .ant-tabs-nav-container {
  margin-top: 0 !important;
}
</style>
